<template>
  <div v-show="props.compType === 'tree'">
    <el-form-item label="ID">
      <el-tooltip
          class="item"
          effect="dark"
          content="请注意,ID的修改可能会导致该组件相关事件失效！"
          placement="left"
      >
        <el-input class="input" v-model="props.id" @change="handlerChangeGetId"></el-input>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="字典key">
      <el-input class="input" v-model="props.dictionaryKey"></el-input>
    </el-form-item>
    <el-form-item label="标题">
      <el-input class="input" v-model="props.label"></el-input>
    </el-form-item>
    <el-form-item label="栅格">
      <el-input-number v-model="props.span" :min="1" :max="24"/>
    </el-form-item>
    <el-form-item label="栅格间隔">
      <el-input-number v-model="props.gutter" :min="0"></el-input-number>
    </el-form-item>
    <el-form-item label="标签宽度">
      <el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
    </el-form-item>
    <el-form-item label="显示标签">
      <el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
    </el-form-item>
    <el-form-item label="禁用">
      <el-switch v-model="props.disabled"></el-switch>
    </el-form-item>
    
    <el-divider>树形配置</el-divider>
    <el-form-item label="显示搜索框">
      <el-switch v-model="props.showSearch"></el-switch>
    </el-form-item>
    <el-form-item label="显示复选框">
      <el-switch v-model="props['show-checkbox']"></el-switch>
    </el-form-item>
    <el-form-item label="默认展开全部">
      <el-switch v-model="props['default-expand-all']"></el-switch>
    </el-form-item>
    <el-form-item label="点击节点选中">
      <el-switch v-model="props['check-on-click-node']"></el-switch>
    </el-form-item>
    <el-form-item label="禁用联级选择">
      <el-switch v-model="props['check-strictly']"></el-switch>
    </el-form-item>
    <el-form-item label="可拖拽">
      <el-switch v-model="props.draggable"></el-switch>
    </el-form-item>
    <el-form-item label="显示操作按钮">
      <el-switch v-model="props.showOperation"></el-switch>
    </el-form-item>
    
    <el-divider>数据配置</el-divider>
    
    <el-form-item label="数据来源">
      <el-radio-group v-model="props.dataType">
        <el-radio label="static">静态数据</el-radio>
        <el-radio label="dynamic">动态数据</el-radio>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="API地址" v-if="props.dataType === 'dynamic'">
      <el-input v-model="props.action" placeholder="请输入API地址"></el-input>
    </el-form-item>
    
    <el-form-item label="节点键名">
      <el-input v-model="props.props.value" placeholder="默认为value"></el-input>
    </el-form-item>
    <el-form-item label="节点标签名">
      <el-input v-model="props.props.label" placeholder="默认为label"></el-input>
    </el-form-item>
    <el-form-item label="子节点名">
      <el-input v-model="props.props.children" placeholder="默认为children"></el-input>
    </el-form-item>
    
    <el-divider>高级配置</el-divider>
    
    <el-form-item label="懒加载">
      <el-switch v-model="props.advanced.lazy"></el-switch>
    </el-form-item>
    <el-form-item label="默认值">
      <el-input v-model="props.modelValue" placeholder="请输入选中的节点值，多个用逗号分隔"></el-input>
    </el-form-item>
    
    <icon-dialog v-model="props['suffix-icon']" v-model:visible="iconDialogVisible_suffix"/>
    <icon-dialog v-model="props['prefix-icon']" v-model:visible="iconDialogVisible_prefix"/>
  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue'
import { changeId, type FormDesignerMixin } from '../mixin/FormDesignerMixin'
import iconDialog from '@/components/formDesigner/iconDialog.vue'
import { Remove } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'tree-config',
  
  mixins: [changeId],
  
  components: {
    Remove,
    iconDialog
  },
  
  props: {
    props: {
      type: Object,
      required: true
    },
    getFormId: {
      type: Function,
      required: true
    }
  },
  
  data() {
    return {
      val: '',
      iconDialogVisible_suffix: false,
      iconDialogVisible_prefix: false,
      handlerChangeIdCallback: undefined as Function | undefined
    }
  },
  
  methods: {
    handlerChangeLabel(val: any) {
      this.props.labelWidth = val ? 80 : 1
    },
    
    handlerSuffixSelectIcon() {
      this.iconDialogVisible_suffix = true
    },
    
    handlerPrefixSelectIcon() {
      this.iconDialogVisible_prefix = true
    },
    
    handlerChangeGetId(val: any) {
      if (this.handlerChangeIdCallback) {
        this.handlerChangeIdCallback(val)
      }
    }
  }
})
</script>

<style scoped>
.input {
  width: 75%;
}

.rule-item {
  padding-top: 5px;
  padding-bottom: 5px;
}

.close-btn {
  text-align: center;
}

.close-icon:hover {
  cursor: pointer;
}

.close-btn :deep(.el-icon-remove-outline) {
  color: red;
}
</style>